<template>
  <div class="list-container">
    <van-nav-bar
      title="书库"
      left-text="返回"
      left-arrow
      :border="false"
      @click-left="clickToBack"
      @click-right="clickToSearch"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <van-dropdown-menu class="filter shadow-sm">
      <van-dropdown-item
        v-model="type"
        :options="typeOption"
        @change="onFilterChange"
      />
      <van-dropdown-item
        v-model="isOver"
        :options="isOverOption"
        @change="onFilterChange"
      />
    </van-dropdown-menu>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        class="px-4 mt-4"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <detail-card
          class="mb-4 item"
          v-for="item in list"
          :key="item.id"
          :id="item.id"
          :name="item.name"
          :image="item.image"
          :writer="item.writer"
          :is_over="item.is_over"
          :intro="item.intro"
          :type="item.type"
        ></detail-card>
      </van-list>
    </van-pull-refresh>

    <BackToTop />
  </div>
</template>
<script lang="ts" setup>
import { ref, Ref, onBeforeMount, computed } from 'vue'
import { useRouter } from 'vue-router'
import DetailCard from '@/components/DetailCard/DetailCard.vue'
import { getList } from '@/api/list'
import { getBookType } from '@/api/common'
import { BookItem, BookType } from '@/common/types'
import BackToTop from '@/components/BackToTop/BackToTop.vue'

const list: Ref<BookItem[]> = ref([])
const loading = ref(false)
const finished = ref(false)
const error = ref(false)
const refreshing = ref(false)

const bookTypeList: Ref<BookType[]> = ref([])
onBeforeMount(() => {
  getBookType().then((res) => {
    bookTypeList.value = res.data.bookType
  })
})

interface optionItem {
  text: string
  value: number
}
const isOver = ref(0)

const isOverOption: Ref<optionItem[]> = ref([
  { text: '全部', value: 0 },
  { text: '连载', value: 1 },
  { text: '完结', value: 2 }
])

const type = ref(0)
const typeOption: Ref<optionItem[]> = ref([])

let page: number = 1
const pageSize: number = 20

const onLoad = async () => {
  try {
    if (loading.value) return
    loading.value = true
    if (bookTypeList.value.length === 0) {
      const { data } = await getBookType()
      bookTypeList.value = data.bookType
      data.bookType.forEach((item: BookItem) => {
        typeOption.value.push({
          text: item.name,
          value: item.id
        })
      })
      type.value = data.bookType[0].id
    }
    const { data } = await getList({
      type: type.value,
      isOver: isOver.value,
      page,
      pageSize
    })
    if (data.list.length === 0) {
      finished.value = true
    }
    loading.value = false
    list.value = [...list.value, ...data.list]
    page += 1
  } catch (e) {
    error.value = true
  }
}
const onRefresh = () => {
  if (loading.value) return
  finished.value = false
  loading.value = true
  page = 1
  list.value = []
  getList({ type: type.value, isOver: isOver.value, page, pageSize })
    .then((res) => {
      if (res.data.list.length === 0) {
        finished.value = true
      }
      loading.value = false
      refreshing.value = false
      list.value = [...list.value, ...res.data.list]
      page += 1
    })
    .catch((e) => {
      error.value = true
    })
}

const router = useRouter()
const clickToBack = () => {
  router.back()
}

const clickToSearch = () => {
  router.push({ name: 'Search' })
}

const onFilterChange = () => {
  onRefresh()
}
</script>
<style lang="scss" scoped>
.list-container {
  min-height: 100vh;
  .filter {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
    :deep(.van-dropdown-menu__bar) {
      box-shadow: none;
    }
  }
}
</style>
